<!--地址列表-->
<template>
  <div class="container address setting">
    <UserSidebar style="margin-top: 2.5rem" />
    <div class="setting-frame">
      <div class="title-frame" v-if="isMobile">
        <p style="margin-left: 0.3rem">My Settings</p>
        <div class="title-panel">
          <div
            class="nav-frame ac-bg"
            v-for="(item, index) in navList"
            :key="index"
            @click="clickNav(index)"
          >
            <div class="nav-panel">
              <div class="nav-fast">
                <img
                  class="icon"
                  :style="index != 0 ? 'width:1.1rem' : ''"
                  :src="item.icon"
                />
              </div>
            </div>
            <div class="nav-label">
              <p class="label">{{ item.name }}</p>
              <div class="icon-frame" v-if="navIndex == index"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="setting-panel">
        <div class="page-title">
          <p>{{ pageTitle }}</p>
        </div>
        <Loading v-if="loading" />
        <Nodata v-if="addressList.length == 0 && !loading" />
        <div class="container address-frame" v-if="!loading">
          <div
            class="address-panel"
            v-for="(item, index) in addressList"
            :key="index"
            @click="clickAddress(index)"
          >
            <div class="address-fast">
              <p class="address" style="margin-bottom: 0.5rem">
                <span
                  class="default"
                  v-if="item.acquiesce == 1"
                  style="margin-right: 0.2rem"
                >
                  Default
                </span>
                <span style="font-size: 0.7rem">{{ item.recipient_name }}</span>
                <span style="color: #646566; margin-left: 0.5rem">{{
                  item.telephone
                }}</span>
              </p>
              <p class="address">
                {{ item.address }}&nbsp;{{ item.city_name }}&nbsp;{{
                  item.state_name
                }}&nbsp; {{ item.country_name }}&nbsp;
              </p>
            </div>
            <div
              class="icon-panel ac-bg"
              v-if="state != 'select'"
              @click.stop="updateAddress(index)"
            >
              <!-- <img class="icon" src="@/assets/imgs/user/edit.png" /> -->
              <van-icon class="icon" size="0.9rem" name="edit" />
            </div>
            <div
              v-if="state != 'select'"
              class="icon-panel ac-bg"
              @click.stop="deleteAddress(index)"
            >
              <van-icon class="icon" size="0.9rem" name="delete-o" />
            </div>
          </div>
          <sub-btn class="btn-frame" title="New address" @clickBtn="clickBtn" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tool from "@/common/tool.js";
export default {
  data() {
    return {
      pageTitle: "My address",
      state: "default",
      loading: false,
      navList: [
        {
          icon: require("@/assets/imgs/user/mysetting.png"),
          name: "My Settings",
          status: 0,
        },
        {
          icon: require("@/assets/imgs/user/myaddress.png"),
          name: "My Address",
          status: 0,
        },
        {
          icon: require("@/assets/imgs/user/changep.png"),
          name: "Change Password",
          status: 0,
        },
      ],
      navIndex: 1,
    };
  },
  computed: {
    refreshAddress() {
      return this.$store.state.user.refreshAddress;
    },
    addressList() {
      return this.$store.state.user.addressList;
    },
  },
  activated() {
    if (this.refreshAddress) {
      this.getAddress();
    }
  },
  methods: {
    //切换NAV
    clickNav(index) {
      if (index == 0) {
        this.$router.replace({
          path: "/user/setting",
        });
      } else if (index == 1) {
        this.$router.replace({
          path: "/user/address",
        });
      } else if (index == 2) {
        this.$router.replace({
          path: "/user/changepassword",
        });
      }
    },
    //获取地址
    async getAddress() {
      this.loading = true;
      await this.$store.dispatch("user/address");
      this.loading = false;
    },
    //编辑地址将地址传过去
    updateAddress(index) {
      let addressInfo = this.addressList[index];
      tool.setStorageAsyn("addressInfo", addressInfo, () => {
        this.$router.push({
          path: "/user/address/editaddress",
          query: {
            type: "edit",
          },
        });
      });
    },
    //新增地址
    clickBtn() {
      this.$router.push({
        path: "/user/address/editaddress",
      });
    },
    //删除地址
    async deleteAddress(index) {
      this.tips.startLoadingToast();
      let res = await this.$store.dispatch("user/addaddressDelress", {
        id: this.addressList[index].id,
      });
      this.tips.closeToast();
      console.log(res);
      if (res.code == 0) {
        this.$toast("Successfully deleted");
        this.addressList.splice(index, 1);
      } else {
        this.$toast.fail(res.msg);
      }
    },
    //点击地址
    clickAddress(index) {
      if (this.state == "select") {
        let checkOrderAddress = {
          id: "",
          name: "",
          address: "",
          mobile: "",
        };
        checkOrderAddress.id = this.addressList[index].id;
        checkOrderAddress.name = this.addressList[index].recipient_name;
        checkOrderAddress.mobile = this.addressList[index].telephone;
        checkOrderAddress.address =
          this.addressList[index].country_name +
          " " +
          this.addressList[index].state_name +
          " " +
          this.addressList[index].city_name +
          " " +
          this.addressList[index].address;
        this.$store.commit("user/setCheckOrderAddress", checkOrderAddress);
        this.$router.back();
      } else {
        this.updateAddress(index);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "address.less";
@import "../setting/setting.less";
</style>